<template>
    <div class="app-container">
      <!-- 查询表单 -->
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <!-- 状态下拉选择框 -->
        <el-form-item label="状态" prop="status">
          <el-select v-model="queryParams.status" placeholder="请选择状态" clearable @change="handleQuery">
            <el-option label="未处理" value="0"></el-option>
            <el-option label="已处理" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
  
      <!-- 操作按钮 -->
      <el-row :gutter="10" class="mb8">
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>
  
      <!-- 表格 -->
      <el-table v-loading="loading" :data="complaintList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="编号" align="center" type="index" />
        <el-table-column label="投诉内容" align="center" prop="comment" />
        <el-table-column label="是否包含图片" align="center">
          <template slot-scope="scope">
            {{ scope.row.hasImages === 1 ? '是' : '否' }}
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            {{ scope.row.status === 0 ? '未处理' : '已处理' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-view" @click="handleDetail(scope.row.id)"
              v-hasPermi="['service:complaint:view']">详情</el-button>
            <!-- 处理按钮，仅在状态为未处理时显示 -->
            <el-button v-if="scope.row.status === 0" size="mini" type="text" icon="el-icon-check" @click="handleProcess(scope.row.id)"
              v-hasPermi="['service:complaint:update']">处理</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 分页 -->
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
  
      <!-- 用户投诉详情对话框 -->
      <el-dialog :title="detailTitle" :visible.sync="detailOpen" width="600px" append-to-body>
        <el-form ref="detailForm" :model="detailForm" label-width="120px">
          <el-form-item label="编号">
            {{ detailForm.id }}
          </el-form-item>
          <el-form-item label="用户手机号">
            {{ detailForm.userPhoneNumber }}
          </el-form-item>
          <el-form-item label="工程师手机号">
            {{ detailForm.engineerPhoneNumber }}
          </el-form-item>
          <el-form-item label="处理人">
            {{ detailForm.handlerName }}
          </el-form-item>
          <el-form-item label="投诉内容">
            {{ detailForm.comment }}
          </el-form-item>
          <el-form-item label="是否包含图片">
            {{ detailForm.hasImages ? '是' : '否' }}
          </el-form-item>
          <el-form-item label="状态">
            {{ detailForm.status === 0 ? '未处理' : '已处理' }}
          </el-form-item>
          <el-form-item label="创建时间">
            {{ detailForm.createTime }}
          </el-form-item>
          <el-form-item label="投诉图片">
            <div v-for="(image, index) in detailForm.complaintImages" :key="index">
              <img :src="image.imageUrl" alt="投诉图片" style="max-width: 100%; max-height: 100%;">
            </div>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="detailOpen = false">关 闭</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  <script>
  import { listComplaint, getComplaint, updateComplaint } from "@/api/feedback/complaint";
  
  export default {
    name: "Complaint",
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 用户投诉表格数据
        complaintList: [],
        // 弹出层标题
        title: "",
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          status: null, // 初始化状态为null
        },
        detailOpen: false,
        detailTitle: "用户投诉详情",
        detailForm: {}
      };
    },
    created() {
      this.getList();
    },
    methods: {
      //查询投诉详情
      handleDetail(id) {
        getComplaint(id).then(response => {
          this.detailForm = response.data;
          this.detailOpen = true;
        });
      },
      /** 查询用户投诉列表 */
      getList() {
        this.loading = true;
        listComplaint(this.queryParams).then(response => {
          this.complaintList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id);
        this.single = selection.length !== 1;
        this.multiple = !selection.length;
      },
      // 处理投诉
      handleProcess(id) {
        this.$modal.confirm('确认处理该投诉吗？').then(() => {
          updateComplaint({ id: id, status: 1 }).then(response => {
            this.$modal.msgSuccess("处理成功");
            this.getList();
          });
        }).catch(() => {});
      }
    }
  };
  </script>